<template>
  <div class="app-container">
    <zhezhao :is-show="isShow" />
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="100px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="批次状态">
              <el-select v-model="form.status" clearable>
                <el-option
                  v-for="item in examineList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="体验劵名称" >
              <el-input v-model="form.keyword" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="4" class="alignRight">
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button type="primary" @click="toRoutes('couponsAdd')">创建体验劵</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="code" label="批次号"  align="center"/>
        <el-table-column prop="name" label="体验券名称"  align="center"/>
        <el-table-column  label="有效期" align="center">
          <template slot-scope="scope">
            {{scope.row.start_time.split(' ')[0]}} 至 {{scope.row.end_time.split(' ')[0]}}
          </template>
        </el-table-column>
        <el-table-column prop="OriginalPrice" label="已领取数量(张)" align="center"/>
        <el-table-column prop="service_name" label="服务名称" align="center"/>
        <el-table-column prop="status" label="批次状态"align="center" >
          <template slot-scope="scope">
            {{scope.row.status == 1 ? '待发布': '已发布'}}
          </template>

        </el-table-column>

        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              v-if="scope.row.status==2"
              @click="toRoutes('couponsInfo',scope.row.id)"
            >查看</el-button>
            <el-button
              type="text"
              size="mini"
              v-if="scope.row.status==1"
              @click="toRoute('couponsEdit',scope.row)"
            >编辑</el-button>
            <el-button 
              size="mini" 
              type="text" 
              v-if="scope.row.status==1"
              @click="changeStatus(scope.row.id)">发布</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>

import {ticketList,changeStatus} from '@/api/couponsList'
import zhezhao from '@/components/CreateMask/index'

export default {
  components: { zhezhao },

  data() {
    return {
      // loading层
      tableLoading: false,
      centerDialogVisible:false,
      // 提交form
      form: {
        page: 1,
        pageSize: 10,
        status:'',
        keyword:''
      },
      isShow: false,
      examineList: [
        {
          name: '待发布',
          value: '1'
        },
        {
          name: '已发布',
          value: '2'
        }
      ],
      tableData: [],
      // 分页
      page_sizes: [10, 30, 50, 100],
      page_totals: 60
    }
  },
  mounted() {
    this.getSource()
    this.getList()
  },
  methods: {
    // 路由跳转
    toRoutes(e, id) {
      const route = { name: e, query: { id: id }}
      this.$router.push(route)
    },
    toRoute(e, id) {
      const route = { name: e, params: id}
      this.$router.push(route)
    },
    // 发布
    changeStatus(e) {
       this.$confirm('发布后可以将体验券组合成会员礼包进行售卖', '发布后不可修改体验券信息，确认发布吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          changeStatus({id:e}).then(res=>{
            if(res.data.code==200){
                this.getList()
              this.$message({
                  type: 'success',
                  message: '发布成功!'
                });
            }else{
              this.$message.error(res.data.msg);
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    // 查询
    searchList() {
      this.form.page = 1
      this.getList(this.form)
    },
    // 列表数据获取
    getList() {
      this.tableLoading = true
      ticketList(this.form)
        .then(res => {
          //  console.log(res.data)
          if (res.data.code == 200) {
            // console.log(res)
            this.tableData = res.data.data.data;
            this.page_totals = res.data.data.total;
            this.tableLoading =false

          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // 重置
    reset() {
      this.form = {
        page: 1,
        pageSize:10,
        status:'',
        keyword:''
      }
      this.getList()
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList(this.form)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val
      this.getList(this.form)
    },
    // 获取审核状态
    getSource() {
      let  source = sessionStorage.getItem('source')
      let  status = sessionStorage.getItem('check_status')
      if(status==3){
        this.isShow = false
      }else{
        this.isShow = true
      }
    }
  }
}
</script>
<style scoped>
.app-container {
padding: 20px !important;
}

</style>
